<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>长表格的练习</title>
        <style type="text/css">
            .tab{
               
                width: 300px;
                /* 居中 */
                margin: 0 auto;
                border-collapse: collapse;
                /* 设置表格内容居中 */
                text-align: center;

            }
            /* 给单元格设置边框 */
           td,th{
                /* 设置边框 */
                border: 1px solid black;
           }

        </style>
    </head>
<body>
    <!-- 
        有些表格很长，需要将表格分为三个部分，分别为表头、表格的主体、表格底部
        HTML中提供了三个标签：
            thead：表头
            tbody：表格主体
            tfoot：表格底部
        这三个标签用来区分表格的不同部分，它们都是table的子标签，tr标签需要写在这些标签中
     -->
    <table class="tab" >
        <!-- 指定表头 -->
       <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
       </thead>
       <!-- 指定表格主体 -->
       <tbody>
            <tr>
                <td>2024.07.22</td>
                <td>5000</td>
                <td>2000</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>2024.07.23</td>
                <td>8000</td>
                <td>1000</td>
                <td>7000</td>
            </tr>
       </tbody>
       <tfoot>
            <tr>
                <td colspan="2"></td>
                <td>合计</td>
                <td>10000</td>
            </tr>
       </tfoot>
    </table>
</body>
</html>